@prefix: 'well-co';

.well-co {
  &-mine-sweeping {
    width: min-content;

    &-bar {
      display: flex;
      justify-content: space-between;
    }

    &-board {
      width: min-content;
      border: 1px solid gray;
    }

    &-row {
      display: flex;
      width: min-content;
    }

    &-cell {
      align-items: center;
      width: 30px;
      height: 30px;
      margin: 2px;
      overflow: hidden;
      text-align: center;
      border: 1px solid #666;
      border-radius: 10%;
      border-radius: 20%;

      &--1 {
        color: blueviolet;
        background-color: red;
        opacity: 0;
      }

      &-0 {
        background-color: #e1e1e1;
      }

      &-1 {
        color: gray;
        background-color: #ddd;
      }

      &-2 {
        color: rgb(126, 149, 241);
        background-color: #ccc;
      }

      &-3 {
        color: rgb(197, 80, 80);
        background-color: #bbb;
      }

      &-4 {
        color: rgb(106, 124, 227);
        background-color: #aaa;
      }

      &-5 {
        color: rgb(211, 232, 96);
        background-color: #999;
      }

      &-6 {
        color: rgb(255, 242, 0);
        background-color: #888;
      }

      &-7 {
        color: rgb(220, 72, 13);
        background-color: #777;
      }

      &-8 {
        color: rgb(170, 6, 6);
        background-color: #707070;
      }

      &-win {
        background-color: yellow;
      }
    }
  }
}
